<script setup lang="ts">
  import axios from 'axios';
  import { ref } from 'vue';
  import {v4 as uuidv4}from 'uuid';
  const uploadRef = ref()
  const formdata=ref({
    username:'',
    password:'',
    userTouxiang:'',
    phone:'',
    merchantName:'',
    merchantIntroduction:'',
    touxiang:'',
    bg:'',
    position:'',
  })
  //存储图片预览url
  const previewImage = ref('');
  const resetForm = () => {
    formdata.value = {
      username: '',
      password: '',
      userTouxiang:'',
      phone:'',
      merchantName:'',
      merchantIntroduction:'',
      touxiang:'',
      bg:'',
      position:''
    };
    if(uploadRef.value){
      (uploadRef.value as any).clearFiles();
    }
  }
  const handleFileChange = (file: any) => {
    const reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = () => {
      previewImage.value =( reader.result as string);
    }
  }
  const handleSubmit = () => {
    uploadRef.value.submit();

  }
  const handleuploadSuccess = (response:any) => {
    console.log(response);
    formdata.value.userTouxiang=response.msg;
    axios.post('http://localhost:8080/user/register',formdata.value).then(res=>{
      if (res.data.code===200){
        alert("注册成功")
      }else {
        alert("注册失败")
      }
    })
  }
  const handleuploadError = (response:any) => {
    console.log(response);
  }
</script>
  
<template>
    <div class="register-container">
      <el-card class="register-card" shadow="hover">
        <h1>商家入驻</h1>
        <el-form :model="formdata" ref="registerForm" label-width="100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formdata.username" placeholder="请输入用户名" clearable />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formdata.password" type="password" placeholder="请输入密码" clearable />
          </el-form-item>
           <el-form-item label="用户头像" prop="usertouxiang">
            <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    drag
                    :auto-upload="false"
                    :limit="1"
                    :on-success="handleuploadSuccess"
                    :on-error="handleuploadError"
                    :on-change="handleFileChange"
                    action="http://localhost:8080/user/uploadUserTouxiang"
                    multiple
                    >
            <img v-if="previewImage!=''" :src="previewImage" alt="Preview" style="width: 50px;height: 50px;">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将图片拖到此处 <em>点击上传</em>
            </div>
      <template #tip>
        <div class="el-upload__tip">
           支持jpg/png文件，且不超过500kb
        </div>
      </template>
    </el-upload>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formdata.phone" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="商家名称" prop="merchantName">
            <el-input v-model="formdata.merchantName" placeholder="请输入商家名称" clearable />
          </el-form-item>
          <el-form-item label="商家介绍" prop="merchantIntroduction">
            <el-input
              v-model="formdata.merchantIntroduction"
              type="textarea"
              placeholder="请输入商家介绍"
              rows="3"
            />
          </el-form-item>
          <el-form-item label="商铺头像链接" prop="touxiang">
            <el-input v-model="formdata.touxiang" placeholder="请输入头像链接" clearable />
          </el-form-item>
          <el-form-item label="背景图片链接" prop="bg">
            <el-input v-model="formdata.bg" placeholder="请输入背景图片链接" clearable />
          </el-form-item>
          <el-form-item label="位置" prop="position">
            <el-input v-model="formdata.position" placeholder="请输入位置" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button type="default" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  
  <style scoped>
  .register-container {
    max-width: 600px;
    margin: 50px auto;
  }
  .register-card {
    padding: 20px;
  }
  </style>